<#include "/common/taglibs.ftl" />
<@menu code='${entityName!}'/>
<title><@spring.message code="${entityName!}" /> - <@spring.message code="${op}" /></title>
<div class="portlet light bordered form-fit">
    <div class="portlet-title">
        <div class="caption">
            <i class="icon-user font-blue-hoki"></i>
            <span class="caption-subject font-blue-hoki bold uppercase"><@spring.message code="${entityName!}" /> / <@spring.message code="${op}" /></span>
            <#if op != 'op.view'>
            <span class="caption-helper"><@spring.message code="reuqired.tips"/></span>
            </#if>
        </div>
        <@formHeaderButtons resourceIdentity='${resourceIdentity!}' baseUrl='${baseUrl!}'/>
    </div>
    <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <form class="form-horizontal form-bordered form-row-stripped" method="POST" id="mainForm">
            <div class="form-body">
            	<div class="form-group">
	            	<@showGlobalErrors commandName="m" />
	            	<#include "/common/taglibs/validationMessage.ftl"> 
            	</div>
            	<input type="hidden" class="form-control" id="id" name="id" value="${(m.id)!}"/>
            	<div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="office"/><span class="required"> * </span></label>
                    <div class="col-md-3">
                        <select class="form-control" id="officeSelect" name="officeId" >
                            <#if m.office??>
                            <option value="${(m.office.id)!}" selected="selected">${(m.office.name)!} (${(m.office.enName)!})</option>
                            </#if>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.leader"/></label>
                    <div class="col-md-3">
                        <select class="form-control" id="user-select" name="leaderId" >
                        <#if m.office??>
                            <option value="${(m.leader.id)!}" selected="selected">${(m.leader.name)!} (${(m.leader.enName)!})</option>
                        </#if>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.name"/><span class="required"> * </span></label>
                    <div class="col-md-3">
                        <input type="text" placeholder="" class="form-control" name="name" value="${(m.name)!}" required/>
                        <!-- <span class="help-block"> <@spring.message code="user.name.tips"/> </span> -->
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.enName"/><span class="required"> * </span></label>
                    <div class="col-md-3">
                        <input type="text" placeholder="" class="form-control" name="enName" value="${(m.enName)!}" required/>
                        <!-- <span class="help-block"> <@spring.message code="user.name.tips"/> </span> -->
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.staffno"/><span class="required"> * </span></label>
                    <div class="col-md-3">
                        <input type="text" placeholder="" class="form-control" id="staffno" name="staffNO" value="${(m.staffNO)!}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.loginName"/><span class="required"> * </span></label>
                    <div class="col-md-3">
                        <input type="text" placeholder="" class="form-control" id="loginName" name="loginName" value="${(m.loginName)!}"/>
                        <span class="help-block"> <@spring.message code="user.loginName.tips"/> </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.password"/><#if op == 'op.add'><span class="required"> * </span></#if></label>
                    <div class="col-md-3">
                        <input type="password" placeholder="" class="form-control" id="password" name="plainPassword" value=""/>
                        <span class="help-block"> <@spring.message code="user.password.tips"/> </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.password.confirm"/><#if op == 'op.add'><span class="required"> * </span></#if></label>
                    <div class="col-md-3">
                        <input type="password" placeholder="" class="form-control" name="passwordConfirm" value=""/>
                        <span class="help-block"> <@spring.message code="user.password.confirm.tips"/> </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.email"/><span class="required"> * </span></label>
                    <div class="col-md-3">
						<input type="text" placeholder="" class="form-control" id="email" name="email" value="${(m.email)!}" > 
                        <span class="help-block"> <@spring.message code="user.email.tips"/> </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.phone"/></label>
                    <div class="col-md-3">
						<input type="text" placeholder="" class="form-control" id="phone" name="phone" value="${(m.phone)!}" > 
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.mobile"/></label>
                    <div class="col-md-3">
						<input type="text" placeholder="" class="form-control" id="mobile" name="mobile" value="${(m.mobile)!}" > 
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.fax"/></label>
                    <div class="col-md-3">
						<input type="text" placeholder="" class="form-control" id="fax" name="fax" value="${(m.fax)!}" > 
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.address"/></label>
                    <div class="col-md-3">
						<input type="text" placeholder="" class="form-control" id="address" name="address" value="${(m.address)!}" > 
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.zip"/></label>
                    <div class="col-md-3">
						<input type="text" placeholder="" class="form-control" id="zip" name="zip" value="${(m.zip)!}" > 
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="control-label col-md-3"><@spring.message code="user.birthday"/></label>
                    <div class="col-md-3">
                        <@dateInput date=(m.birthday)! inputName="birthday"/>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="col-md-3 control-label"><@spring.message code="user.gender"/></label>
                    <div class="col-md-9">
                        <div class="mt-radio-list">
                            <#list genders as item>
                                <label class="mt-radio"> <input type="radio" name="gender" value="${item}" ${(item_index==0)?string('checked','')}> <@spring.message code="${item.info}"/> <span></span>
                                </label> 
                            </#list>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="col-md-3 control-label"><@spring.message code="activated"/></label>
                    <div class="col-md-9">
                        <div class="mt-radio-list">
                            <label class="mt-radio"> <input type="radio" name="activated" value="true" checked> <@spring.message code="yes"/> <span></span>
                            </label> 
                            <label class="mt-radio"> <input type="radio" name="activated" value="false" > <@spring.message code="no"/> <span></span>
                            </label> 
                        </div>
                    </div>
                </div>
            </div>
            <@formFooterButtons resourceIdentity='${resourceIdentity!}' baseUrl='${baseUrl!}'/>
        </form>
        <!-- END FORM-->
    </div>
</div>
<page-plugin-style>
<#include "/common/plugins/jquery.select2.style.ftl" />
<#include "/common/plugins/jquery.datetime.picker.style.ftl" />
<#include "/common/plugins/jquery.validate.style.ftl" />
</page-plugin-style>
<page-plugin-script>
<#include "/common/plugins/jquery.select2.script.ftl" />
<#include "/common/plugins/jquery.datetime.picker.script.ftl" />
<#include "/common/plugins/jquery.validate.script.ftl" />
</page-plugin-script>
<page-style></page-style>
<page-script>
	<script>
		jQuery(document).ready(function() {
			var $form = $("#mainForm")
    		$.mms.form.initValue("gender", "${(m.gender)!}");
    		$.mms.form.initValue("activated", "${(m.activated)!?string('true','false')}");
			<#if op == 'op.view'>
	        	$.mms.form.readonly($form, false);
			</#if>
		    $.mms.form.validate($form, {
		    	rules: {
	                name: {
	                    minlength: 2,
	                    required: true
	                },
                    officeId:{
                        required: true
                    },
                    staffno:{
                        required: true,
                        remote: {
                            url: "${ctx}/${baseUrl!}/validate",
                            type: "post",
                            data: {
                                field:"staffNO",
                                fieldValue: function() {
                                    return $("#staffno").val();
                                },
                                id: function() {
                                    return $("#id").val();
                                }
                            }
                        }
                    },
	                loginName:{
	                	minlength: 4,
	                    required: true,
	                    remote: {
	                      url: "${ctx}/${baseUrl!}/validate",
	                      type: "post",
	                      data: {
	                    	field:"loginName",
	                    	fieldValue: function() {
	                          return $("#loginName").val();
	                        },
	                        id: function() {
	                          return $("#id").val();
	                        }
	                      }
	                    }
	                },
	                plainPassword:{
	                	<#if op == 'op.add'>
	                	required: true,
	                	</#if>
	                	minlength: 6
	                },
	                passwordConfirm:{
	                	<#if op == 'op.add'>
	                	required: true,
	                	</#if>
	                	equalTo: "#password"
	                },
	                email:{
	                	required: true,
	                	email: true,
	                    remote: {
	                      url: "${ctx}/${baseUrl!}/validate",
	                      type: "post",
	                      data: {
	                    	field:"email",
	                    	fieldValue: function() {
	                          return $("#email").val();
	                        },
	                        id: function() {
	                          return $("#id").val();
	                        }
	                      }
	                    }
	                }
		    	},
		    	messages: {
                    staffno:{
                        remote:'<@spring.message code="user.invalid.staffno.occupied"/>'
                    },
		    		loginName:{
		    			remote:'<@spring.message code="user.invalid.loginName.occupied"/>'
		    		},
		    		email:{
		    			remote:'<@spring.message code="user.invalid.email.occupied"/>'
		    		}
		    	}
		    });

		    $.mms.form.initSelect($("#officeSelect"), {
                ajax : {
                    url : "${ctx}/app/office/office/ajax/select/search"
                },
                getDisplayRepo: function (repo) {
                  return repo.text || repo.name +" ("+ repo.enName +")";
                }
            });

            $.mms.form.initSelect($('#user-select'), {
                ajax : {
                    url : "${ctx}/system/account/user/ajax/select/search"
                },
                getDisplayRepo: function(repo){
                    return repo.text ||　repo.name +" ("+ repo.enName +")";
                }
            });
		});
	</script>
</page-script>